<template>
  <div class="home">
    <input type="text" v-model="inpVal" @keyup.enter="handleClick">
    <button>搜一下</button>

    <hr size="7">

    <router-link to="/search/金牌排行榜">金牌排行榜</router-link>
     | 
    <router-link to="/search/奖牌总排行榜">奖牌总排行榜</router-link>
     | 
    <router-link to="/search/我们不是牛马,我们是人">我们不是牛马,我们是人</router-link>
  </div>
</template>


<script>

export default {
  data(){

    return {
      inpVal:''
    }
  },
  methods:{
    handleClick(){
      console.log('点击了按钮');
      // 编程式导航
      // 1. path路径跳转
      // 2. name命名路由跳转

      // this.$router.push({
      //   path:`/search/${this.inpVal}`
      // })
      // this.$router.push(`/search/${this.inpVal}`)

      // a/b/c/d/e/f/g/h/......
      // 太长了 就可以用 name的方式

      this.$router.push({
        name:'nsearch',
        // query:{},
        params:{'words':this.inpVal}
      })
 
      
    }
  
  }
}

</script>

<style>
input {
  outline: none;
  border: none;
}
</style>